<!--
 * @Author       : wfl
 * @LastEditors: ww
 * @description  :
 * @updateInfo   :
 * @Date         : 2022-11-23 15:09:27
 * @LastEditTime: 2023-06-30 09:34:26
-->
<script setup lang="ts">
import { useDraggable } from '@vueuse/core'

import { ref } from 'vue'
import { buildUUID } from 'iking-utils'
import FlowDesign from './FlowDesign.vue'

const props = defineProps({
  process: {
    type: Object,
    default: () => {}
  },
  advance: {
    type: Object,
    default: () => {}
  },
  data: {
    type: Object,
    default: () => {}
  }
})

const route = useRoute()
const { isEdit } = route.query
const flowStore = useFlowStore()

// 非编辑条件时，设置默认流程
if (!isEdit) {
  flowStore.loadForm({
    id: props?.data?.id || null,
    formId: props?.data?.formId || null,
    base: {
      ...props?.data?.form
    },
    settings: {
      commiter: [],
      admin: [],
      sign: false,
      notify: {
        types: ['APP'],
        title: '消息通知标题'
      }
    },
    formItems: props?.data?.formViewConfig?.widgetList || [],
    process: props.process || {
      id: buildUUID(),
      parentId: null,
      type: 'INITIATOR',
      name: '发起人',
      desc: '任何人',
      // 再次发起时是否由退回人直接审批
      reSubmitToBack: true,
      props: {
        assignedUser: [],
        formPerms: []
      },
      permissions: [],
      children: {}
    },
    advance: props.advance
  })
}

const el = ref<HTMLElement | null>(null)
// const { width, height } = document.body.getBoundingClientRect()

const { style } = useDraggable(el as any, {
  initialValue: {
    x: document.body.getBoundingClientRect().width / 2 - 60,
    y: (window as any).__MICRO_APP_ENVIRONMENT__ ? 120 : 100
  }
})

const flowRef = ref(null)

defineExpose({ flowRef })

// 扁平数组转换为树形结构
</script>

<template>
  <!-- 拖动 -->
  <div ref="el" :style="style" style="position: fixed;">
    <FlowDesign ref="flowRef" />
  </div>
</template>
